<template>
  <a-modal v-model:visible="visible" v-if="visible" :title="title" @ok="handleOk" @cancel="handleCancel" width="750px">
    <a-form :model="form" :rules="rules" :label-col="{ style: { width: '140px' } }" ref="formRef">
      <a-row gutter="16">
        <a-col span="24">
          <a-form-item label="所属应用" name="type" class="invoice-type-row" required>
            <a-select ref="select" v-model:value="form.type">
              <a-select-option v-for="item in appType" :value="item.value" :key="item.value">{{ item.label }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row gutter="16">
        <a-col span="24">
          <a-form-item label="所属分类" name="category" required>
            <a-select ref="select" v-model:value="form.category">
              <a-select-option v-for="item in videoType" :value="item.value" :key="item.value">{{ item.label }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col span="24">
          <a-form-item label="视频标题" name="title" required>
            <a-input v-model:value="form.title" placeholder="请输入视频标题" />
          </a-form-item>
        </a-col>
        <a-col span="24">
          <a-form-item label="视频简介" name="detail" required>
            <a-textarea v-model:value="form.detail" placeholder="请输入视频简介" />
          </a-form-item>
        </a-col>
        <a-col span="24">
          <a-form-item label="视频封面" name="videoPageList" required>
            <UploadImage default=".jpg,.png,.jpeg" :maxCount="1" v-model="form.videoPageList" />
          </a-form-item>
        </a-col>
        <a-col span="24">
          <a-form-item label="视频" name="videoList" required>
            <UploadImage size="1024" v-if="form.videoList.length < 1" default=".wmv,.rmvb,.mp4" :maxCount="1" v-model="form.videoList" />
            <del-wrap v-else @close="handleRemoveVideo">
              <video controls :width="300" :src="form.videoList[0]"></video>
            </del-wrap>
          </a-form-item>
        </a-col>
        <a-col span="24">
          <a-form-item label="视频售价" name="videoPrice" required>
            <a-input v-model:value="form.videoPrice" placeholder="请输入视频售价" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <div class="d-j-around">
        <a-button @click="handleCancel" class="d-a-center">取消</a-button>
        <a-button type="primary" @click="handleOk" class="d-a-center">确认</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {} from '@/api'
import { addOrUpdateVideo } from '@/api/content/index'
import { appType, videoType } from '@/utils/dict.js'
import UploadImage from '@/components/common/UploadImage.vue'
import DelWrap from '@/components/common/del-wrap'
const currentDate = ref('')

onMounted(() => {
  const date = new Date()
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  currentDate.value = `${year}年${month}月${day}日`
})
const visible = ref(false)
const formRef = ref()
const title = ref('新增视频')
const emit = defineEmits(['submit'])
const useForm = () => {
  return {
    id: '',
    type: 0,
    category: '',
    videoPageList: [],
    videoList: [],
    title: '',
    detail: '',
    videoPage: '',
    video: '',
    videoPrice: ''
  }
}
const form = ref(useForm())
const rules = {
  category: [{ required: true, message: '请选择类型' }],
  title: [{ required: true, message: '请选择分类' }],
  openerName: [{ required: true, message: '请输入视频标题' }],
  openerContent: [{ required: true, message: '请输入视频简介' }],
  videoPageList: [{ required: true, message: '请上传视频封面' }],
  videoList: [{ required: true, message: '请上传视频' }],
  videoPrice: [{ required: true, message: '请输入视频售价' }]
}

const handleOk = () => {
  formRef.value
    .validate()
    .then(async () => {
      let obj = {
        ...form.value,
        video: form.value.videoList[0],
        videoPage: form.value.videoPageList[0]
      }
      let res = await addOrUpdateVideo(obj) // 传递 form.value

      if (res.success) {
        message.success('提交成功')
        visible.value = false
        emit('submit')
      }
    })
    .catch(() => {
      message.error('请填写完整信息')
    })
}

const handleCancel = () => {
  form.value = useForm()
  visible.value = false
}

const showModal = data => {
  // form.value.orderJson = data.join(',')
  if (data) {
    form.value = {
      ...form.value,
      ...data
    }
    form.value.videoList[0] = data.video
    form.value.videoPageList[0] = data.videoPage
    title.value = '编辑视频'
  }
  visible.value = true
}
const handleRemoveVideo = () => {
  form.value.videoList = []
}
defineExpose({
  showModal
})
</script>

<style scoped>
.ant-form-item {
  margin-bottom: 16px;
}
.ant-form-item-label {
  font-weight: 500;
  width: 120px !important;
  text-align: right;
  flex: 0 0 120px;
}
.ant-form-item-label > label {
  min-width: 120px;
  justify-content: flex-end;
}
.ant-input {
  width: 100%;
}
.invoice-type-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.current-date {
  font-size: 14px;
  color: #666;
  margin-left: auto;
}
</style>
